<script lang="ts">
import {ref} from "vue";

export default {
  name:"Test",

  // Vue2
  data(){
    return{
      msg:"Vue2,",
      num2:2
    }
  },
  methods:{
    numAdd2:function(){
      this.num2+=2;
    }
  },

  // Vue3
  setup(){ // 初始化
    let name=ref("Vue3,");
    let num3=ref(3);
    function numAdd3(){
        num3.value+=3;
    }
    return {name,num3,numAdd3}
  }
}
</script>

<template>
  <h1>
    Vue Test(我叫刘炀)
  </h1>

  <!-- 差值表达式 -->
  <h2>{{ msg }}{{ num2 }}</h2>
  <!-- Vue指令 -->
  <button v-on:click="numAdd2">点击+2</button>
  <h2>{{name}}{{ num3 }}</h2>
  <button v-on:click="numAdd3">点击+3</button>
</template>

<style scoped>

</style>